

export const addNotification = (editor) => {
    const {
        Components
    } = editor;
    Components.addType('addNotification', {
        model: {
            defaults: {
                name: 'addNotification',
                droppable: true,
                attributes: {
                    speed:'20',//滚动20秒/轮
                },
                traits: [
                    {
                        type: 'text',  
                        label: '标题',  
                        name: 'title',  
                      },  
                      {  
                        type: 'text',  
                        label: 'id',  
                        name: 'id'
                      },
                      {
                        type: 'number',
                        name: 'speed',
                        label:'滚动速度(毫秒/帧)',
                        changeProp:1,
                        default: '20',//秒
                      },
                ],
                components: [{
                    type: 'div',
                    attributes: {
                        class: 'box'
                    },
                    components: [{
                        type:'div',
                        attributes: {
                            class: 'animate'
                        },
                        components: [{
                            type:'text',
                            attributes: {
                                class: 'animate-font'
                            },
                            content:`网页编辑器-横向广告栏`
                        }],
                    }],
                }],
                script() {
                    var thx = document.getElementById(this.attributes.id.value);
                    thx.getElementsByClassName('animate')[0].style.animationDuration = `${this.attributes.speed.value}s`;
                },
                styles: `
                .box {
                    width: 100%;
                    margin: 0 auto;
                    overflow: hidden;
                    text-align:left;
                }

                .animate {
                    margin: 20px 0;
                    width:100%;
                    animation: 15s wordsLoop linear infinite normal;
                }
                .animate-font{
                    font-size: 25px;
                    color: black;
                    display: inline-block;
                    white-space: nowrap;
                }
                @keyframes wordsLoop {
                    0% {
                        transform: translateX(100%);
                        -webkit-transform: translateX(100%);
                    }
                    100% {
                        transform: translateX(-100%);
                        -webkit-transform: translateX(-100%);
                    }
                }

                @-webkit-keyframes wordsLoop {
                    0% {
                        transform: translateX(200%);
                        -webkit-transform: translateX(200%);
                    }
                    100% {
                        transform: translateX(0);
                        -webkit-transform: translateX(0);
                    }
                `},
                init() {
                    let that = this;
                    // 滚动速率
                    that.on('change:speed', function() {
                        that.get('attributes').speed = that.attributes.speed
                        // 回调script
                        that.trigger("change:script");
                    });  
                },
        }
    });

    // 注册组件
    editor.BlockManager.add('add-notification', {
        label: '横向广告栏',
        category: '其他类',
        content: {
            type: 'addNotification'
        },
    });
};